<template>
	<view>
		<view class="dish_list">
			<!-- 获取后端接口数据  等到后端功能开发完成后 取消注释 -->
			<view class="dish_item" v-for = "item in list" :key = "item.dishId" @click="navigator(item.dishId)">
				<image :src="item.imageUrl"></image>
				<view class="dishName">
					<text>{{item.dishName}}</text>
				</view>
				<view class="info">
					<text>发布者:{{item.author}}</text>
					<text>收藏数:{{item.collectNum}}</text>
					<text>浏览数:{{item.viewNum}}</text>
				</view>
			</view>	
			
			<!-- <view class="dish_item"@click="navigator()">
				<image src="../../static/img/hotMeal1.jpg"></image>
				<view class="dishName">
					<text>炸鸡柳</text>
				</view>
				<view class="info">
					<text>发布者:哈哈哈</text>
					<text>收藏数:123</text>
					<text>浏览数:321</text>
				</view>
			</view>
			<view class="dish_item"@click="navigator()">
				<image src="../../static/img/hotMeal1.jpg"></image>
				<view class="dishName">
					<text>炸鸡柳</text>
				</view>
				<view class="info">
					<text>发布者:哈哈哈</text>
					<text>收藏数:123</text>
					<text>浏览数:321</text>
				</view>
			</view>
			<view class="dish_item"@click="navigator()">
				<image src="../../static/img/hotMeal1.jpg"></image>
				<view class="dishName">
					<text>炸鸡柳</text>
				</view>
				<view class="info">
					<text>发布者:哈哈哈</text>
					<text>收藏数:123</text>
					<text>浏览数:321</text>
				</view>
			</view>
			<view class="dish_item"@click="navigator()">
				<image src="../../static/img/hotMeal1.jpg"></image>
				<view class="dishName">
					<text>炸鸡柳</text>
				</view>
				<view class="info">
					<text>发布者:哈哈哈</text>
					<text>收藏数:123</text>
					<text>浏览数:321</text>
				</view>
			</view>
			<view class="dish_item"@click="navigator()">
				<image src="../../static/img/hotMeal1.jpg"></image>
				<view class="dishName">
					<text>炸鸡柳</text>
				</view>
				<view class="info">
					<text>发布者:哈哈哈</text>
					<text>收藏数:123</text>
					<text>浏览数:321</text>
				</view>
			</view> -->
		</view>

	</view>

</template>

<script>
	export default {
		props:['list'],
		data() {
			return {
				
			}
		},
		methods: {
			navigator(id){
				console.log(id)
				this.$emit('itemClick',id)
			}
		}
	}
</script>

<style lang="scss">
	.dish_list{
		padding: 10rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		.dish_item{
			background: #FFFFFF;
			width: 750rpx;
			margin: 20rpx;
			padding: 5rpx;
			box-sizing: border-box;
			image{
				width: 90%;
				height: 200px;
				display: flex;
				margin: 15rpx auto;
			}
			.dishName{
				margin:10rpx 10rpx;
				color: black;
				font-size: 35rpx;
				padding-left: 30rpx;
			}
			.info{
				color:#C0C0C0;
				font-size: 25rpx;
				line-height: 35rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
				text{
					padding-left: 40rpx;
				}
			}
		}
	}

</style>
